<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <link href='http://fonts.googleapis.com/css?family=Share' rel='stylesheet' type='text/css'>
    <style type="text/css">
      html { height: 100% ;}
      body {margin: 0; padding: 0;
      	font-size: 18px;
        line-height: 22px;
        font-family: 'Share';
        color: #000;
        padding: 10px 0 10px 0;
        background: #FDFDFD;
        border-top: 5px solid;
       }

       .clear {
        clear: both;
        height: 0;
       }
       h1 {
        font-weight: normal;
        font-size: 56px;
        text-transform: ;
        margin-top: 40px;
       }

       h3 {
        text-align: right;
       }

      #main {
        width: 980px;
        margin: auto;
      }

      #intro {
        width: 430px;
        float: left;
        padding: 0 10px;
      }

      #info_layer {
        position: absolute;
        display: none;
        top: 0;
        right: 0;
      	background: #fff;
      	height: 300px;
      	width: 300px;
      	opacity: 0.5;
      	-moz-opacity: 0.5;
      	filter:alpha(opacity=5);
      	top: 0;
      	box-shadow: 1px 0 10px #000;
      }

      #map {
        margin: 80px auto 20px auto;
        width: 980px;
        height: 300px;
        position: relative;
        box-shadow: 1px 0 10px #000;     
      }
      #map_canvas {
        margin: auto;
      	width: 980px;
      	height: 300px;
      }

      #addRequest {
        width: 450px;
        margin-left: 80px;
        float: right;
      }

      #addRequest label {
        float: left;
        display: block;
        width: 150px;
        text-align: right;
        margin: 0 5px 0 0;
      }

      #addRequest input[type=text]{
        width: 280px;
      }

      #addRequest textarea {
        width: 279px;
        height: 100px;
      }

      #addRequest p {
        clear: both;
      }

      #btnSend {
        float: right;
      }

      #thank {
        display: none;
      }

      footer {
        height: 50px;
        background: #000;
        color: #fff;
        width: 100%;
        line-height: 30px;
        vertical-align: middle;
      }

      footer p {
        text-align: center;
        font-weight: 12px;
      }

      footer p a,
      footer p a:visited {
        color: #fff;
      }

    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBQZIno8Hzqo7uRJrgv00NjFbpBOZE_q10&sensor=true">
    </script>
    <script type="text/javascript">
		function initialize() {
		  var myOptions = {
		    disableDefaultUI: true,
        zoomControl: true,
		    center: new google.maps.LatLng(49.867312,2.332706),
		    mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoom: 12,
		  }

		var stylesArray = [
		  {
		    stylers: [
		      { saturation: -100 },
		      { visibility: "on" }
		    ]
		  },{
		    featureType: "road.arterial",
		    elementType: "labels",
		    stylers: [
		      { saturation: -98 },
		      { gamma: 1.06 },
		      { visibility: "on" }
		    ]
		  }
		]

	
		  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

		   map.setOptions({styles: stylesArray});

		   var georssLayer = new google.maps.KmlLayer('https://maps.google.fr/maps/ms?ie=UTF8&msa=0&output=kml&msid=217783826059391648401.0004ba19ec19dea1f26b7', {preserveViewport:true});

			 georssLayer.setMap(map);

       if ("geolocation" in navigator) { 
        
        
        function test(position){
          var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
          var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title:"Vous êtes ici"
          });
          map.panTo(latlng);
        }
        var position = navigator.geolocation.getCurrentPosition(test);
       }

}
		function loadScript() {
		  var script = document.createElement("script");
		  script.type = "text/javascript";
		  script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyBQZIno8Hzqo7uRJrgv00NjFbpBOZE_q10&sensor=true&callback=initialize";
		  document.body.appendChild(script);
		}

		window.onload = loadScript;
    </script>
  </head>
  <body>
      <div id="main">
      <h1>Génération bistros</h1>
    		<div id="map">
        <div id="map_canvas"></div>
    		<div id="info_layer"></div>
      </div>

      <div id="intro">
        <p>Le monde des agences est tout petit, et comme chacun sait, tout le monde s'y connaît - et connaît quelqu'un qui connaît quelqu'un qui...</p>
<p>L'alcoolisme mondain est de rigueur, la bonne chère aussi. Mais avez-vous déjà pensé qu'en levant le coude en débriefant de votre journée quelque part en terrasse, vous êtes probablement à côté de l'un de vos confrères, qui lui-même débriefe peut-être aussi sur ses projets en cours ?</p>
<p>Un peu de parano et d'(in)discrétion s'impose.</p>
<p>Voici une carte qui vous permettra de mieux localiser les "points chauds" de la capitale si l'envie vous prend de faire un peu "d'intelligence économique"</p>
      </div>
  <div id="addRequest">
    <h3>Je veux ajouter une agence :</h3>
      <form action="send" method="post">
          <p><label>Nom de l'agence :</label> <input type="text" id="name" name="name"/></p>
          <p><label>Adresse :</label> <input type="text" id="address" name="address"/></p>
          <p><label>Description :</label> <textarea name="desc" id="desc"></textarea></p>
          <p><label>Site web :</label> <input type="text" name="url" id="url"/></p>
          <input type="submit" value="Envoyer" id="btnSend"/>
      </form>
      <div id="thank">
        <p>Merci d’avoir contribué à cette carte.
Votre proposition sera étudié et mis en
ligne rapidement.</p>
      </div>
  </div>
      </div>
      <br class="clear"/>
<footer>
  <p>Site conçu par <a href="http://vincent-vitre.com" target="_blank">Vincent Vitre</a> et réalisé par <a href="http://kwemi.com" target="_blank">Olivier Mayer</a></p>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
  $('form').submit(function() {
    var name = $('#name').attr('value');
    var address = $('#address').attr('value');
    var desc = $('#desc').attr('value');
    var url = $('#url').attr('value');

    var data = "name="+ name +"&address="+ address + "&desc=" + desc + "&url=" + url;

    $.ajax({
      type: 'POST',
      url: '/send',
      data: data,
      success: success,
    });
    function success(){
      $('form').hide();
      $('#thank').show();
    }
    return false;
  });

</script>

  </body>
</html>